import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import {Table, Modal, Switch, Popconfirm} from 'antd'
import classnames from 'classnames'
import {DropOption} from 'components'
import {Link} from 'react-router-dom'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './ArticleTable.less'

import {timestamp2Date} from 'utils/date'
import {notification} from "antd/lib/index"

const {confirm} = Modal

const ArticleTable = ({
                        onDeleteItem, onEditItem, isMotion, onShowPubModal, onRemovePub, location, ...tableProps
                      }) => {

  const handleMenuClick = (record, e) => {
    // 1 编辑
    if (e.key === '1') {
      onEditItem(record)
    } else if (e.key === '2') { // 2 删除
      confirm({
        title: '是否确认删除当前项？',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }
  }

  // 发布状态修改
  const onChangePubSwitch = (isPub, record) => {
    // 发布
    if (isPub) {
      onShowPubModal(record)
    } else {
      // 取消发布
      onRemovePub(record)
    }
  }

  const columns = [
    {title: '文章标题', dataIndex: 'title', key: 'title'},
    {title: '文章文号', dataIndex: 'sno', key: 'sno'},
    {title: '文章作者', dataIndex: 'author', key: 'author'},
    // {
    //   title: '发布状态', dataIndex: 'isPub', key: 'isPub', width: 150,
    //   render: (text, record) => (
    //     <Switch
    //       checkedChildren="已发布"
    //       unCheckedChildren="未发布"
    //       defaultChecked={text === '1' ? true : false}
    //       onChange={(isPub) => onChangePubSwitch(isPub, record)} />),
    // },
    // {title: '生效日期', dataIndex: '', key: ''},
    // {title: '失效日期', dataIndex: '', key: ''},
    {title: '创建人', dataIndex: 'creator', key: 'creator'},
    // {
    //   title: '发布日期', dataIndex: 'Date', key: 'createDate',
    //   render: text => (<span style={{color: "red"}}>{text}</span>),
    // },
    {
      title: '创建时间', dataIndex: 'createTime', key: 'createTime',
      // render: text => <span>{ moment(text).format('YYYY-HH-DD HH:mm:ss') } </span>,
      render: text => <span>{timestamp2Date(text)}</span>,
    },

    {
      title: '操作',
      key: 'operation',
      width: 100,
      fixed: 'right',
      render: (text, record) => {
        return (<DropOption onMenuClick={e => handleMenuClick(record, e)}
                            menuOptions={[
                              {key: '1', name: '编辑'},
                              // {key: '3', name: '预览'},
                              {key: '2', name: '删除'},
                            ]} />)
      },
    },
  ]

  // const AnimateBody = (props) => {
  //   return <AnimTableBody {...props} />
  // }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table, {[styles.motion]: false})}
      bordered
      // scroll={{x: 1250}}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        // body: {wrapper: isMotion ? AnimateBody : CommonBody},
        body: {wrapper: CommonBody},
      }}
    />
  )
}

ArticleTable.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default ArticleTable
